<template>
	<view class="questionnaire-list">
		<view class="wallpaper"></view>
		<view class="container">
			<!--banner内容-->
			<view class="top-banner mt20">
				<view class="left">
					<view class="top-banner__title">
						请选择您的问卷
					</view>
					<view class="tips">对自己有所了解</view>
				</view>
				<view class="right">
					<image src="~@/static/img/service-questionnaire-ing.png" class="top-banner-rightImg"/>
				</view>
			</view>
			<view class="list mt20">
				<view class="list-block" hover-class="hoverList" :class="{'isAns':item.isAns === 1}"
				      v-for="(item,index) in _questionnaireList" :key="index"
				      @click="toQuestionnaire(item)">
					<view class="list-block__left">
						<view class="name">{{ item.name }}</view>
						<view class="desc" v-if="item.desc">{{ item.desc || "" }}</view>
					</view>
					<view class="list-block__right">
						<tn-icon name="right"></tn-icon>
					</view>
				</view>
			</view>
			<!--已答问卷列表-->
			<view class="bottom-entry mt40">
				<view @click="toAnsList">已答问卷列表</view>
			</view>
		</view>
		
		<tn-popup v-model="showPopup" open-direction="bottom">
			<view class="popup-content">
				<tn-form ref="formRef" :model="popupForm" :rules="popupFormRules" label-position="top">
					<tn-form-item label="编号" prop="name">
						<tn-input v-model="popupForm.name"></tn-input>
					</tn-form-item>
					<tn-form-item label="年龄" prop="age">
						<tn-input v-model="popupForm.age" type="number"></tn-input>
					</tn-form-item>
					<tn-form-item label="性别" prop="sex">
						<tn-radio-group v-model="popupForm.sex">
							<tn-radio label="男">男</tn-radio>
							<tn-radio label="女">女</tn-radio>
						</tn-radio-group>
					</tn-form-item>
				</tn-form>
				<view class="btn">
					<tn-button shape="round" class="ml80" width="100%" height="90" font-size="34"
					           :custom-style="successBtnStyle" @click="toContractPage">
						确认并签名
					</tn-button>
				</view>
			</view>
		</tn-popup>
		<tn-popup v-model="codePopup">
			<view class="popup-content">
				请输入管理员code
				<tn-input v-model="code"></tn-input>
				<view class="mt20">
					<tn-button shape="round" width="100%" height="60" @click="toAnsPage">确认</tn-button>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script setup lang="ts">
import {questionnaireList} from "@/util/questionnaire";
import {onShow} from "@dcloudio/uni-app";
import {reactive, ref} from "vue";
import {successBtnStyle} from "@/util/common";

let showPopup = ref(false);
let popupForm = reactive<Record<string, any>>({});
const popupFormRules = {
	name: {required: true, message: "请输入姓名", trigger: "blur"},
	phone: {required: true, message: "请输入手机号码", trigger: "blur"},
	age: {required: true, message: "请输入年龄", trigger: "blur"},
	sex: {required: true, message: "请选择性别", trigger: "change"},
};
let formRef = ref();
let codePopup = ref(false);
let code = ref("");
let _questionnaireList = ref<any>([]);

const toQuestionnaire = (item: Record<string, any>) => {
	if (item.isAns) {
		uni.showToast({
			title: "您已回答过这个问卷",
			icon: "none"
		});
		return;
	}
	let flag = uni.getStorageSync("isSign");
	console.log(flag);
	if (!flag) {
		uni.showToast({
			title: "查看问卷前请先填写个人信息",
			icon: "none"
		});
		setTimeout(() => {
			showPopup.value = true;
		}, 1000);
	} else {
		uni.navigateTo({
			url: `/pages/index/index?id=${item.value}`
		});
	}
};
const toContractPage = () => {
	formRef.value?.validate((val: any) => {
		if (!val) {
			uni.showToast({
				title: "请完成必填项",
				icon: "error"
			});
		} else {
			uni.setStorageSync("userInfo", popupForm);
			formRef.value?.resetFields();
			uni.navigateTo({
				url: "/pages/index/contract"
			});
		}
	});
};
const toAnsList = () => {
	codePopup.value = true;
};
const toAnsPage = () => {
	if (code.value === "swf666") {
		uni.navigateTo({
			url: "/pages/index/ansList"
		});
	} else {
		uni.showToast({
			title: "请联系管理员",
			icon: "error"
		});
	}
};


onShow(() => {
	_questionnaireList.value = questionnaireList;
	let isAns = uni.getStorageSync("isAns");
	if (isAns && isAns.length > 0) {
		_questionnaireList.value.forEach((item: any) => {
			if (isAns.indexOf(item.value) > -1) {
				item["isAns"] = 1;
			}
		});
	}
});
</script>

<style lang="scss">
.questionnaire-list {
	.wallpaper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #2DCA8D;
	}
	
	.container {
		position: relative;
		padding-bottom: env(safe-area-inset-bottom);
		
		.top-banner {
			padding: 15rpx 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			&__title {
				font-size: 45rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
			
			.tips {
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-top: 10rpx;
			}
			
			&-rightImg {
				width: 238rpx;
				height: 238rpx;
			}
		}
		
		.list {
			padding: 0 20rpx;
			
			&-block {
				padding: 20rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-shadow: 36px 36px 80px rgba(0, 0, 0, 0.07);
				color: #333333;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.name {
					font-weight: 600;
					font-size: 36rpx;
				}
				
				.desc {
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}
		
		.bottom-entry {
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30rpx;
			
			view {
				padding: 0 60rpx;
			}
			
			.contract {
				border-left: 1px solid #FFFFFF;
			}
		}
	}
	
	.hoverList {
		background: #ececec !important;
	}
	
	.isAns {
		background: #cccccc !important;
	}
	
	.popup-content {
		padding: 40rpx;
	}
}
</style>
